<html lang="zh" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org" layout:decorate="~{template/container}">
<!--/*@thymesVar id="userInfo" type="site.zsxeee.work.spring.oa.database.entity.User"*/-->
<!--/*@thymesVar id="deptList" type="java.util.List<site.zsxeee.work.spring.oa.database.entity.Dept>"*/-->
<!--/*@thymesVar id="jobList" type="java.util.List<site.zsxeee.work.spring.oa.database.entity.Job>"*/-->
<main class="main-content col-lg-10 col-md-9 col-sm-12 p-0 offset-lg-2 offset-md-3" layout:fragment="content">
    <div th:replace="template/navbar"></div>
    <div class="main-content-container container-fluid px-4">
        <!-- Page Header -->
        <div class="page-header row no-gutters py-4">
            <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
                <span class="text-uppercase page-subtitle">概览</span>
                <h3 class="page-title">用户资料</h3>
            </div>
        </div>
        <!-- End Page Header -->
        <!-- Default Light Table -->
        <div class="row">
            <div class="col-lg-4">
                <div class="card card-small mb-4 pt-3">
                    <div class="card-header text-center">
                        <div class="mb-3 mx-auto">
                            <img class="rounded-circle" src="" th:src="${userInfo.avatar}" alt="用户头像" width="110">
                        </div>
                        <h4 class="mb-0" th:text="${userInfo.nickName}"></h4>
                        <span class="text-muted d-block mb-2" th:text="${userInfo.userName}"></span>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="card card-small mb-4">
                    <div class="card-header border-bottom">
                        <h6 class="m-0">账户详情</h6>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item p-3">
                            <div class="row">
                                <div class="col">
                                    <form method="post">
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="userName">用户名</label>
                                                <input type="text" class="form-control" id="userName" placeholder="用户名" th:value="${userInfo.userName}" disabled required>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="nickName">昵称</label>
                                                <input type="text" class="form-control" id="nickName" name="nickName" placeholder="昵称" th:value="${userInfo.nickName}" required>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label style="display:block;">性别</label>
                                                <div class="form-check form-check-inline custom-control custom-radio mb-1" style="display: inline-flex">
                                                    <input type="radio" id="genderMale" name="gender" class="custom-control-input" th:checked="${userInfo.gender != null && userInfo.gender}" required>
                                                    <label class="custom-control-label" for="genderMale" th:value="'true'"> 男</label>
                                                </div>
                                                <div class="form-check form-check-inline custom-control custom-radio mb-1" style="display: inline-flex">
                                                    <input type="radio" id="genderFemale" name="gender" class="custom-control-input" th:checked="${userInfo.gender != null && !userInfo.gender}" required>
                                                    <label class="custom-control-label" for="genderFemale" th:value="'false'"> 女</label>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="birth">生日</label>
                                                <input type="date" class="form-control" name="birth" id="birth" th:value="${userInfo.birth == null ? '' : #dates.format(userInfo.birth, 'yyyy-MM-dd')}">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="email">电子邮箱</label>
                                                <input type="email" class="form-control" id="email" name="email" placeholder="邮箱地址" th:value="${userInfo.email}" required>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="tel">电话号码</label>
                                                <input type="tel" class="form-control" id="tel" name="tel" placeholder="电话号码" th:value="${userInfo.tel}" required>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="dept">部门</label>
                                                <select id="dept" name="dept" class="form-control" required>
                                                    <option selected disabled="disabled" value="">请选择</option>
                                                    <option th:each="dept:${deptList}" th:text="${dept.name}" th:value="${dept.id}"></option>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-6">
                                            <label for="job">职位</label>
                                            <select id="job" name="job" class="form-control" required>
                                                <option th:selected="${userInfo.job == null}" disabled value="">请选择</option>
                                                <option th:each="job:${jobList}" th:text="${job.name}" th:value="${job.code}" th:selected="${userInfo.job != null && userInfo.job.code == job.code}"></option>
                                            </select>
                                        </div>
                                        </div>
                                        <button type="submit" class="btn btn-accent">更新资料</button>
                                    </form>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- End Default Light Table -->
    </div>
</main>
</html>